<template>
  <div>
    <el-table :data="myschoolclazz" style="width: 100%" max-height="250">
      <el-table-column prop="ID" label="序号" width="60">
        <template slot-scope="scope">{{scope.$index+1}}</template>
      </el-table-column>
      <el-table-column prop="name" label="班级名称">
        <template slot-scope="scope">{{ scope.row.schoolclazz.name }}</template>
      </el-table-column>
      <el-table-column prop="type" label="状态"></el-table-column>
      <el-table-column prop="teacher" label="教师"></el-table-column>
      <el-table-column prop="type" sortable label="开班日期">
        <template slot-scope="scope">{{ totime(scope.row.schoolclazz.starttime) }}</template>
      </el-table-column>
      <el-table-column prop="hour" label="已用课时"></el-table-column>
      <el-table-column prop="type" label="操作">
        <template slot-scope="scope">
          <el-button
            type="primary"
            v-if="scope.row.type == '在读'"
            size="mini"
            @click="add(scope.row)"
          >转班</el-button>
          <el-button
            size="mini"
            v-if="scope.row.type == '在读'"
            type="danger"
            @click="del(scope.row)"
          >停班</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog class="school-form" title="选择报名班级" width="750px" :visible.sync="setaddress">
      <el-table :data="clazzbyschooladdresid" style="width: 100%" max-height="250">
        <el-table-column prop="ID" label="序号" width="60">
          <template slot-scope="scope">
            <el-radio v-model="clazzs" name="clazzs" :label="scope.row.ID"></el-radio>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="班级名称"></el-table-column>
        <el-table-column prop="type" sortable label="人数">
          <template slot-scope="scope">{{getstudentnum(scope.row.ID)}} / {{ scope.row.studentnum }}</template>
        </el-table-column>
        <el-table-column prop="info" label="所在校区">
          <template
            slot-scope="scope"
          >{{ getschooladdressbyid( scope.row.schooladdressid).name }}</template>
        </el-table-column>
        <el-table-column prop="studentnum" sortable label="课程">
          <template
            slot-scope="scope"
          >{{ scope.row.schoolcourseid?getschoolcoursebyid( scope.row.schoolcourseid).name:'' }}</template>
        </el-table-column>
        <el-table-column prop="type" sortable label="开班日期">
          <template slot-scope="scope">{{ totime(scope.row.starttime) }}</template>
        </el-table-column>
        <el-table-column prop="studentnum" sortable label="结课日期">
          <template slot-scope="scope">{{ totime(scope.row.endtime) }}</template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" @click="submitForm2">确 定</el-button>
        <el-button @click="setaddress = false" size="mini">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import {
  asyncchangeschoolstudentschoolclazz,
  asyncstopschoolstudentschoolclazz
} from "../../../../plugins/api.js";
export default {
  name: "myclass",
  props: {
    student: {
      type: Object,
      default: () => {
        return {
          ID: "",
          accessToken: null,
          birthday: "",
          createdAt: null,
          deleted: null,
          headimg: "",
          lastlogintime: null,
          name: "",
          password: "",
          phonenum: null,
          publicopenid: null,
          relationship: "",
          schooladdressid: null,
          sex: "",
          smallopenid: null,
          type: "",
          unionid: null,
          updatedAt: null
        };
      }
    },
    schoolclazzstudentcalendar: {
      type: Array,
      default: () => []
    },
    myschoolclazz: {
      type: Array,
      default: () => []
    },
    clazzbyschooladdresid: {
      type: Array,
      default: () => []
    },
    totime: {
      type: Function,
      default: () => ""
    },
    getstudentnum: {
      type: Function,
      default: () => 0
    }
  },
  computed: {
    ...mapGetters([
      "getschoolclazz",
      "getschooluser",
      "getschooladdress",
      "getschoolcourse",
      "getschooladdressbyid",
      "getschoolcoursebyid"
    ])
  },
  data() {
    return {
      setaddress: false,
      clazzs: "",
      ruleForm: {
        ID: "",
        type: "",
        schoolstudentid: "",
        schoolclazzid: ""
      }
    };
  },
  methods: {
    async submitForm2() {
      if (this.clazzs) {
        try {
          await asyncchangeschoolstudentschoolclazz({
            ID: this.ruleForm.ID,
            schoolclazzid: this.clazzs,
            schoolstudentid: this.student.ID
          });
          await this.$store.dispatch("actionschoolstudent");
          this.$message.success(`转班成功`);
          this.setaddress = false;
        } catch (err) {
          this.$message.error(`失败:${err}`);
        }
      }
    },
    add(v) {
      if (v.type === "停班") return;
      this.ruleForm = v;
      this.setaddress = true;
    },
    del(v) {
      if (v.type !== "在读") return;
      const { student } = this;
      console.log(v);
      this.$confirm(
        `此操作将${student.name}的${v.schoolclazz.name}停止上课, 是否继续?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "danger"
        }
      )
        .then(async () => {
          try {
            await asyncstopschoolstudentschoolclazz({
              ID: v.ID
            });
            await this.$store.dispatch("actionschoolstudent");

            this.$message.success("停课成功");
          } catch (err) {
            this.$message.error("停课失败");
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消停课"
          });
        });
    }
  }
};
</script>